<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>  
<h3>Messages </h3> 
<div style="height: 15px;" class="questionnaire_submit_button"></div>
 
<table id="messages_table" >
	
	<tbody>
		<c:forEach items="${messages }" var="message">
			<tr>
				<td class="message_from">
					<div><c:out value="${message.fromUser }"></c:out></div> 
				</td>
				<td class="message_body">
					<div><c:out value="${message.subject }"></c:out> - <c:out value="${message.body}"></c:out></div> 
				</td>
			</tr>
		</c:forEach>
	</tbody>
</table>

<style>
#messages_table{
	width: 100%;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	text-align: left;
	border-collapse: collapse;
	margin: 10px 0 10px 0;
}


#messages_table tbody tr {
	margin-top: -1px;
	border: 1px solid;
	border-color: #EBEBEA transparent;
	height: 30px;
	padding: 8px;
	color: #669;
    display: block;
	position: relative;
}

#messages_table tbody tr:hover {
    background: #E8EDFF;
    display: block;
    margin-bottom: 5px;
	border-color: #ccc;
	-webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:  0 4px 16px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}



#messages_table tr td, #messages_table tr th{
	border-bottom: none;
	line-height: 20px;
	padding-top: 7px;
	display: block;
	position: absolute;
} 

#messages_table tbody{
display: block;
}

#messages_table tbody td div{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.message_body{
	right: 0;
	width: 80%;
	text-align: right;
}

.message_from{
	left: 0;
	width: 20%;
	text-align: left;
}


</style>